<template>
  <div>
    <div class="title">
      <span class="iconfont icon-left gobackIcon" @click="goback()"></span>
      <p>商家入驻</p>
    </div>
    <div class="welcomeInfo">
      <p>您好！欢迎入驻某某某商城</p>
    </div>
    <div class="contentFrom">
      <p>信息提交</p>
      <span>请填写相关信息审核入驻</span>
      <div class="form">
        <ul>
          <li>
            <div>
              <p>商家名称</p>
              <input type="text" v-model="name" placeholder="请输入商家名称" />
            </div>
          </li>
          <li>
            <div>
              <p>商家简介</p>
              <textarea rows="4" v-model="description"></textarea>
            </div>
          </li>
          <li>
            <div>
              <p>联系方式</p>
              <input type="text" v-model="mobile" placeholder="请输入商家联系方式" />
            </div>
          </li>
          <li>
            <div>
              <p>营业执照编号</p>
              <input type="text" v-model="businessLicenseNo" placeholder="请输入营业执照编号" />
            </div>
          </li>
          <!-- <li>
            <p>身份证号码</p>
            <input type="text" v-model="" placeholder="请输入商家身份证号码" />
          </li>-->
          <li @click="clickIndex = 0">
            <span>店铺LOGO</span>
            <img v-if="storeLogo" :src="storeLogo" alt />
            <van-uploader v-if="!storeLogo" preview-size="50" :after-read="afterRead" />
          </li>
          <li @click="clickIndex = 1">
            <span>身份证正面</span>
            <img v-if="idcardImgFront" :src="idcardImgFront" alt />
            <van-uploader
              v-if="!idcardImgFront"
              :max-count="1"
              preview-size="50"
              :after-read="afterRead"
            />
          </li>
          <li @click="clickIndex=2">
            <span>身份证反面</span>
            <img v-if="idcardImgBack" :src="idcardImgBack" alt />
            <van-uploader
              v-if="!idcardImgBack"
              :max-count="1"
              preview-size="50"
              :after-read="afterRead"
            />
          </li>
          <li @click="clickIndex=3">
            <span>营业执照</span>
            <img v-if="businessLicenseImg" :src="businessLicenseImg" alt />
            <van-uploader
              v-if="!businessLicenseImg"
              :max-count="1"
              preview-size="50"
              :after-read="afterRead"
            />
          </li>
          <li @click="clickIndex=4">
            <span>微信收款码</span>
            <img v-if="wechat" :src="wechat" alt />
            <van-uploader v-if="!wechat" :max-count="1" preview-size="50" :after-read="afterRead" />
          </li>
          <li @click="clickIndex=5">
            <span>支付宝收款码</span>
            <img v-if="alipay" :src="alipay" alt />
            <van-uploader v-if="!alipay" :max-count="1" preview-size="50" :after-read="afterRead" />
          </li>
          <!-- <li @click="clickIndex=6">
            <span>银行收款码</span>
            <van-uploader :after-read="afterRead" />
          </li>-->
        </ul>
      </div>
      <div class="foot">
        <p>提示：一般2~3个工作日完成资质审核</p>
        <div style="font-size:14px;margin:10px 0;">
          <van-checkbox v-model="checked" shape="square">
            <span style="color:#666" @click="()=>{$router.push('/agreement')}">注册协议</span>
          </van-checkbox>
        </div>
        <van-button block class="btn" @click="submitInfo()">提交审核</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    clickIndex: -1,
    checked: false,
    name: null,
    description: null,
    mobile: null,
    businessLicenseNo: null,
    storeLogo: "",
    idcardImgFront: "",
    idcardImgBack: "",
    businessLicenseImg: "",
    wechat: "",
    alipay: ""
  }),
  methods: {
    afterRead(e) {
      console.log(this.clickIndex);
      let param = new FormData();
      let config = {
        headers: {
          Authorization:
            "bearer" + JSON.parse(this.$store.state.userInfo).access_token,
          "Content-Type": "form-data"
        }
      };
      param.append("files", e.file);
      this.$axios
        .post(`ym/oss-attachment/upload-image`, param, config)
        .then(res => {
          if (res.data.code === 0) {
            let avatar = res.data.data[0].imgSrc;
            switch (this.clickIndex) {
              case 0:
                this.storeLogo = avatar;
                break;
              case 1:
                this.idcardImgFront = avatar;
                break;
              case 2:
                this.idcardImgBack = avatar;
                break;
              case 3:
                this.businessLicenseImg = avatar;
                break;
              case 4:
                this.wechat = avatar;
                break;
              case 5:
                this.alipay = avatar;
                break;
              default:
                console.log("error");
            }
            console.log(avatar);
          } else {
            console.log("上传错误");
          }
        });
    },
    goback() {
      this.$router.go(-1);
    },
    submitInfo() {
      let sendData = {
        mobile: this.mobile,
        storeName: this.name,
        storeLogo: this.storeLogo,
        description: this.description,
        wechat: this.wechat,
        alipay: this.alipay,
        idcardImgFront: this.idcardImgFront,
        idcardImgBack: this.idcardImgBack,
        businessLicenseNo: this.businessLicenseNo,
        businessLicenseImg: this.businessLicenseImg
      };
      console.log(sendData);
      this.$axios.post(`ym/mall-online-merchant/enter`, sendData).then(res => {
        if (res.data.code === 0) {
          this.$Toast("提交成功!");
          this.$router.go(-1);
        } else {
          this.$Toast("提交失败!");
        }
        console.log(res);
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  margin: 0;
  padding: 10px 0;
  background: #0cbccb;
  color: #fff;
  .gobackIcon {
    border: 1px solid #0cbccb;
    position: absolute;
    left: 10px;
  }
  p {
    margin: 0;
    padding: 0;
    text-align: center;
  }
}
.welcomeInfo {
  height: 140px;
  background: url("https://gve.oss-cn-beijing.aliyuncs.com/2020/02/04/1580829630214.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  p {
    margin: 0;
    padding: 10px 0;
    color: #fff;
    font-size: 14px;
    text-align: center;
  }
}
.contentFrom {
  position: relative;
  top: -30px;
  padding: 0 20px;
  > p {
    margin: 0;
    color: #0cbccb;
    font-size: 16px;
  }
  > span {
    font-size: 12px;
    color: #0cbccb;
  }
  .form {
    ul {
      li {
        margin: 10px 0;
        display: flex;
        align-items: center;
        div {
          width: 100%;
          input {
            width: 100%;
            border: none;
            border-bottom: 1px solid #0cbccb;
            padding: 5px 0;
            &::placeholder {
              color: #606060;
              font-size: 12px;
            }
          }
          textarea {
            width: 100%;
            border: 1px solid #0cbccb;
            border-radius: 6px;
          }
        }
        img {
          width: 50px;
          height: 50px;
        }
        p {
          margin: 0;
          padding: 10px 0;
          font-size: 14px;
          color: #3c3c3c;
        }
        span {
          display: inline-block;
          width: 40%;
          color: #3c3c3c;
          font-size: 14px;
          margin-right: 10px;
        }
      }
    }
  }
  .foot {
    p {
      margin: 0;
      padding: 10px 0;
      color: #df4848;
      font-size: 12px;
    }
    .btn {
      background: #0cbccb;
      color: #fff;
      border-radius: 30px;
    }
  }
}
</style>